<!-- src/components/NavigationMenu.vue - 增强版通用侧边栏 -->
<template>
  <nav
      class="navigation-menu"
      :class="{ collapsed: collapsed }"
      :data-theme="theme"
  >
    <!-- 侧边栏头部 -->
    <div v-if="showHeader" class="menu-header">
      <div class="header-content">
        <img v-if="logo" :src="logo" alt="Logo" class="header-logo" />
        <span v-if="title && !collapsed" class="header-title">{{ title }}</span>
      </div>

    </div>

    <!-- 菜单列表 -->
    <div class="menu-content">
      <ul class="menu-list">
        <li
            v-for="item in internalMenuItems" 
            :key="item.id"
            class="menu-item"
            :class="{
            active: item.active,
            'has-children': item.children && item.children.length > 0,
            disabled: item.disabled
          }"
        >
          <!-- 主菜单项 -->
          <div
              class="menu-item-content"
              @click="handleItemClick(item)"
              :title="collapsed ? item.text : ''"
          >
            <span v-if="item.icon" class="menu-icon">
              <!-- 如果 item.icon 是字符串，直接作为组件名传递给 :is -->
              <component :is="item.icon" v-if="typeof item.icon === 'string'" />
              <!-- 如果 item.icon 是组件对象，直接传递给 :is -->
              <component :is="item.icon" v-else-if="typeof item.icon === 'object'" />
              <!-- 否则，显示原始文本（作为备用） -->
              <span v-else>{{ item.icon }}</span>
            </span>

            <span v-if="!collapsed" class="menu-text">{{ item.text }}</span>

            <div v-if="!collapsed" class="menu-meta">
              <span v-if="item.badge" class="menu-badge" :class="item.badgeType">
                {{ item.badge }}
              </span>
              <span
                  v-if="item.children && item.children.length > 0"
                  class="menu-arrow"
                  :class="{ expanded: item.expanded }"
              >
                ▼
              </span>
            </div>
          </div>

          <!-- 子菜单 -->
          <transition name="submenu">
            <ul
                v-if="item.children && item.children.length > 0 && item.expanded" 
                class="submenu-list"
            >
              <li
                  v-for="child in item.children"
                  :key="child.id"
                  class="submenu-item"
                  :class="{ active: child.active, disabled: child.disabled }"
                  @click="handleItemClick(child)"
              >
                <div class="submenu-item-content">
                  <span v-if="child.icon" class="submenu-icon">
                    <!-- 如果 child.icon 是字符串，直接作为组件名传递给 :is -->
                    <component :is="child.icon" v-if="typeof child.icon === 'string'" />
                    <!-- 如果 child.icon 是组件对象，直接传递给 :is -->
                    <component :is="child.icon" v-else-if="typeof child.icon === 'object'" />
                    <!-- 否则，显示原始文本（作为备用） -->
                    <span v-else>{{ child.icon }}</span>
                  </span>
                  <span class="submenu-text">{{ child.text }}</span>
                  <span v-if="child.badge" class="menu-badge" :class="child.badgeType">
                    {{ child.badge }}
                  </span>
                </div>
              </li>
            </ul>
          </transition>
        </li>
      </ul>
    </div>

    <!-- 侧边栏底部 -->
    <div v-if="showFooter" class="menu-footer">
      <slot name="footer">
        <div class="footer-content">

        </div>
      </slot>
    </div>
  </nav>
</template>

<script setup>
import { ref, computed, watch } from 'vue' // 导入 watch
import { useRouter } from 'vue-router'

// Props
const props = defineProps({
  menuItems: {
    type: Array,
    default: () => [] // 移除默认值，由父组件传递
  },
  collapsed: {
    type: Boolean,
    default: false
  },
  collapsible: {
    type: Boolean,
    default: true
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '导航菜单'
  },
  logo: {
    type: String,
    default: ''
  },
  theme: {
    type: String,
    default: 'light', // light | dark
    validator: (value) => ['light', 'dark'].includes(value)
  }
})

// Emits
const emit = defineEmits([
  'item-click',
  'toggle-collapse',
  'settings',
  'help'
])

const router = useRouter()

// 响应式数据，用于内部管理菜单项的展开状态
const internalMenuItems = ref([])

// 监听 props.menuItems 变化，更新 internalMenuItems
// 当父组件传递的 menuItems 发生变化时，同步更新内部菜单项，并确保每个项都有 expanded 属性
watch(() => props.menuItems, (newItems) => {
  internalMenuItems.value = newItems.map(item => ({
    ...item,
    // 如果 item 已经有 expanded 属性，则保留，否则默认为 false
    expanded: item.expanded !== undefined ? item.expanded : false
  }))
}, { immediate: true, deep: true }) // immediate: 立即执行一次监听；deep: 深度监听数组内部对象的变化

// 方法
const toggleCollapse = () => {
  collapsed.value = !collapsed.value // 使用计算属性 collapsed
}

// 处理菜单项点击事件
const handleItemClick = (item) => {
  // 如果菜单项被禁用，则不执行任何操作
  if (item.disabled) {
    return
  }

  // 如果菜单项有子菜单，则切换其展开/折叠状态
  if (item.children && item.children.length > 0) {
    item.expanded = !item.expanded
  } else if (item.route) {
    // 如果菜单项有路由，则进行路由跳转
    router.push(item.route)
    // 触发 item-click 事件，通知父组件
    emit('item-click', item)
  }
}




// 响应式数据
const internalCollapsed = ref(props.collapsed)

// 计算属性
const collapsed = computed({
  get: () => props.collapsed ?? internalCollapsed.value,
  set: (value) => {
    internalCollapsed.value = value
    emit('toggle-collapse', value)
  }
})

// 提供给外部的方法
defineExpose({
  toggleCollapse,
  collapse: () => collapsed.value = true,
  expand: () => collapsed.value = false
})
</script>

<style scoped>

  /* ===== 新增 CSS 变量定义 ===== */
.navigation-menu {
  --sidebar-border-color: #e0e0e0;
  --sidebar-header-bg: #ffffff;
  --sidebar-header-color: #333333;
  --sidebar-collapse-btn-hover-bg: rgba(0, 0, 0, 0.04);
}

.navigation-menu[data-theme="dark"] {
  --sidebar-border-color: #333333;
  --sidebar-header-bg: #1a1a1a;
  --sidebar-header-color: #ffffff;
  --sidebar-collapse-btn-hover-bg: rgba(255, 255, 255, 0.08);
}
/* ===== 原有样式保持不变 ===== */

.navigation-menu {
  width: 280px;
  height: 100%;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  overflow: hidden;
}

.navigation-menu.collapsed {
  width: 64px;
}

/* 主题样式 */
.navigation-menu[data-theme="dark"] {
  background: #1a1a1a;
  border-right-color: #333;
  color: #fff;
}

.menu-header {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid var(--sidebar-border-color);
  background-color: var(--sidebar-header-bg);
  color: var(--sidebar-header-color);
  height: 60px; /* 固定头部高度 */
  box-sizing: border-box;
  justify-content: center; /* 使内容水平居中 */
}

.menu-header .header-content {
  display: flex;
  align-items: center;
  /* flex-grow: 1; */ /* 移除 flex-grow，避免占据所有空间 */
  justify-content: center; /* 使内容在 header-content 内部居中 */
  width: 100%; /* 确保占据可用宽度 */
}

.menu-header .header-logo {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.menu-header .header-title {
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-header .collapse-btn {
  background: none;
  border: none;
  color: var(--sidebar-header-color);
  font-size: 20px;
  cursor: pointer;
  margin-left: 10px;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  position: absolute; /* 绝对定位，使其不影响标题居中 */
  right: 15px; /* 定位到右侧 */
}

.menu-header .collapse-btn:hover {
  background-color: var(--sidebar-collapse-btn-hover-bg);
}

/* 菜单内容区 */
.menu-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  margin-bottom: 2px;
}

.menu-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.menu-item-content {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666;
  position: relative;
  min-height: 44px;
}

.menu-item-content:hover:not(.disabled) {
  background: #e6f2ff;
  color: #1976d2;
}

.menu-item.active > .menu-item-content {
  background: #d0e3ff;
  color: #1976d2;
  font-weight: 500;
}

.menu-item.active > .menu-item-content::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #1976d2;
  border-radius: 0 2px 2px 0;
}

/* 图标样式 */
.menu-icon {
  margin-right: 12px;
  font-size: 18px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Element Plus 图标的额外样式 */
.el-icon {
  vertical-align: middle;
}

.menu-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 菜单右侧元素 */
.menu-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

.menu-badge {
  background: #f44336;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  font-weight: 500;
}

.menu-badge.success {
  background: #4caf50;
}

.menu-badge.warning {
  background: #ff9800;
}

.menu-badge.info {
  background: #2196f3;
}

.menu-arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: #999;
}

.menu-arrow.expanded {
  transform: rotate(180deg);
}

/* 子菜单样式 */
.submenu-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px 0;
  background: #f9f9f9;
  border-radius: 6px;
  overflow: hidden;
}

.submenu-item {
  border-left: 2px solid #e6f2ff;
  margin-left: 16px;
}

.submenu-item.active {
  border-left-color: #1976d2;
}

.submenu-item-content {
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666;
  font-size: 14px;
}

.submenu-item-content:hover {
  background: #e6f2ff;
  color: #1976d2;
}
/*活动状态的医疗蓝加深*/
.submenu-item.active .submenu-item-content {
  background: #d0e3ff;
  color: #1976d2;
  font-weight: 500;
}

.submenu-icon {
  margin-right: 8px;
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.submenu-text {
  flex: 1;
}

/* 底部样式 */
.menu-footer {
  padding: 16px;
  border-top: 1px solid #e0e0e0;
}

.footer-content {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.footer-btn {
  background: none;
  border: 1px solid #e0e0e0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.footer-btn:hover {
  background: #f5f5f5;
  border-color: #d0d0d0;
}

/* 动画效果 */
.submenu-enter-active,
.submenu-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.submenu-enter-from,
.submenu-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
}

.submenu-enter-to,
.submenu-leave-from {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

/* 收起状态的特殊样式 */
.navigation-menu.collapsed .menu-item-content {
  justify-content: center;
  padding: 12px;
}

.navigation-menu.collapsed .menu-icon {
  margin-right: 0;
}

/* 滚动条美化 */
.menu-content::-webkit-scrollbar {
  width: 4px;
}

.menu-content::-webkit-scrollbar-track {
  background: transparent;
}

.menu-content::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 2px;
}

.menu-content::-webkit-scrollbar-thumb:hover {
  background: #bfbfbf;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .navigation-menu {
    width: 100%;
    max-width: 280px;
  }

  .navigation-menu.collapsed {
    width: 0;
  }
}
</style>
